<template>
  <div class="image-upload" :class="{disabled:isDisable}">
    <!-- action:上传的地址服务器4445（必填）仅支持post请求
     如果把照片上传到云服务器可以用action 如果使用第三方服务，action一般为#表示不适用action上传
    list-type:上传按钮的样式
    file-list：配置默认图片
    on-preview 可以预览大图(预览配置项)
    limit:允许上传最大个数
    onexceed:超出个数执行的钩子函数
    on-remove:删除时执行的钩子函数
    http-request:自定义上传，覆盖默认的action上传
    on-change当文件状态改变时被调用，用来更新fileList
    before-upload:就是文件上传之前的钩子比如校验 -->
    <!-- 本地预览：为了给用户好的体验，就是前面不是http而是blob，通过URL.createdObjectURL(文件地址)实现,
    构造出来的值就是一个blob打头的本地预览地址 -->
    <el-upload
      action="#"
      list-type="picture-card"
      class="upload-demo"
      :file-list="fileList"
      :on-remove="handleRemove"
      :http-request="httpRequest"
      :on-change="onChange"
      :before-upload="beforeUpload"
    >
     <el-button class="upload_btn">上传图片</el-button>
     <i class="el-icon-circle-close"></i>
    </el-upload>
  </div>
</template>

<script>
import cos from '@/utils/cos'
export default {
  name: 'ImageUpload',
  props: {
    limit: {
      type: Number,
      default: 1 // 不传默认是1就不用传了
    },
    selectOption: {
      type: Object
    }
  },
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [
        // { url: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.RT4izkxEsW6COpnmBI93zQAAAA?w=210&h=210&c=7&r=0&o=5&dpr=1.3&pid=1.7' },
        // { url: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.SGGilCfdCUzy7khzHbivwAAAAA?w=210&h=210&c=7&r=0&o=5&dpr=1.3&pid=1.7' }
      ]
    }
  },
  computed: {
    isDisable () {
      return this.fileList.length >= this.limit
    },
    isAllUploadSuccess () {
      return this.fileList.every(item => item.status === 'success') // 判断是不是每个图片都上传成功了，不传的话也是true不影响
    }
  },
  methods: {
    handleRemove (file, fileList) {
      // file就是删除的数据，filelist就是剩下的数据,并且我们当前文件的fileList没变
      // 数据删除：同步的方式1
    //   this.fileList = [...fileList]
      // 数据删除，同步的方式2 ,file就是删除的，利用uid分出来不是他的重新赋个值
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    onExceed () {
      this.$message.warning('已经达到最大上传张数')
    },
    // 自定义上传
    httpRequest ({ file }) {
      // 此处的file就是你上传的图片文件
      if (!file) return
      const curFile = this.fileList.find(item => item.uid === file.uid) // 匹配上本地的这个图片
      curFile.status = 'uploading' // 这个状态分3种，ready（默认状态）,uploading（上传中圆圈+precetage）,success（右上角绿勾）
      // 执行上传操作
      cos.putObject({
        Bucket: 'hr-sass-152-1316190604', /* 存储桶 */
        Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */
        Key: +new Date() + file.name, /* 文件名,这样加上一个时间戳就不会有重名问题，因为如果重名会覆盖掉之前的图片 */
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: file, // 上传文件对象
        onProgress: (progressData) => {
          // console.log(JSON.stringify(progressData))
          curFile.percentage = progressData.percent * 100 // 进度条，precetage就是fileList当中的进度条管理，这个prograssData正好能显示过程中的百分比
        }
      }, (err, data) => {
        if (err) {
          this.$message.success('上传失败，请稍后再试')
          return
        }
        const url = '//' + data.Location // 就是加上当前网站的协议头，你写个//他就去自己找了
        curFile.url = url // 把本地的这个blob地址改成存储桶的
        // this.$emit('imgURL', url)
        this.selectOption.img = url
        setTimeout(() => {
          curFile.status = 'success' // 打上小绿勾
        }, 500)
      })
    },
    //   file：表示的上传的数据   fileList: 表示的DOM元素中对应的数据
    onChange (file, fileList) {
      this.fileList = [...fileList]
    //   console.log(file, fileList) 就是为了在你添加之后去掉改变已有的fileList去除+号
    },
    // 上传前的校验 ,校验是不是图片文件，文件大小是不是>5
    beforeUpload (file) {
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error('上传的图片格式, 必须是jpg, gif, bmp, png的格式!')
        return false
      }
      // 2. 限制文件大小 file.size
      if (file.size / 1024 / 1024 >= 5) {
        this.$message.error('上传头像过大, 超过了5M, 必须5M以内')
        return false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.disabled {
  ::v-deep{// 这块的这个名字是看显示页面的f12看出来的是这个盒子去展示那个+号
    .el-upload--picture-card{
      display: none;
    }
   }
}
//修改组件当中的样式要加这个::v-deep
::v-deep{
    .upload-demo{
        margin-left: 70px;
        width: 100px;
        height: 60px;
        .upload_btn{
            position: absolute;
            margin-left:-40px ;
            height: 58px;
            border:0px;
            &hover{
                color: #fff;
            }
        }
        .el-icon-circle-close {
            color: #8c939d;
            position: relative;
            top: -62px;
            right: -48px;
            font-size: 18px;
        }
        .el-upload--picture-card{
            width: 100px;
            height: 60px;
        }
        .el-upload-list__item{
            width: 100px;
            height: 60px;
        }
    }
}

</style>
